Hey @iqbal-web
Thank you for writing this content. I have a few comments.

I like your setup of dividing a topic into description/don't/do.
We have callouts for do and don't text, see the code kitchen sink.

This is a page about "focus handling in forms" and the text addresses much more, like dialogs, focus styling, error handling. This content should be divided between multiple topics and referred to when needed. The main goal is not to add content in multiple places, but write it once and refer to that content if needed.

The main content here is "Consistent tab order", the related succes criteria, resources and how to test.

The extra content that need a page of their own:

Focus styling
Because focus styling is actually a design choice, that content fits better in the section Design and user experience. I just created a page for that, see #214. Then you can refer to that page instead of adding design info here.

Modal
The info of "Managing focus programmatically -> Modal will fit better on the page The dialog modal.
You can refer to that page instead of adding the content here.

Form errors
Info about how to handle form errors should go on the topic about form errors. Also please note that "Move focus to the first error message or field." is not best way to handel focus management in form errors.

Please save all the info that needs to move to there related topic as a comment with the related issues. We can use this when we write that specific topic.

Add a section about how to test, you can get info per success criterion on how to test on https://github.com/alphagov/wcag-primer/wiki.

Add related WCAG success criteria (link to the internal links in the page WCAG QuickRef

• 1.4.13
• 2.1.1
• 2.4.3

See https://wpaccessibility.org/docs/topics/forms/input-label/text-only/ on how to link.

Add links to related pages in this documentation.

About the code example:

<form>
  <input type="text" name="first" placeholder="First name" tabindex="2">
  <input type="text" name="last" placeholder="Last name" tabindex="1">
  <input type="submit" value="Submit" tabindex="3">
</form>

Please read Give a form field an accessible name with a label and add proper labels instead of only a placeholder.

The most common mistake with taborder in forms is that the first form field gets focus. Gravity Forms accessibility documentation Accessibility Guide for Content Providers explains this.
A "good" wrong example would be a tabindex ="1" on the first field.

I hope this helps.

@iqbal-web although I'm very grateful that you help with content, please for a next topic, only pick an issue that is not already assigned to someone :-)

@rianrietveld, I updated the documentation here. If you have any suggestions, please provide so I can update this PR: https://docs.google.com/document/d/1ETWksb6PnhpdI6C2zmX7RYPot85Hjxn8iC0UmvT2OBw/edit?usp=sharing

Hi @@iqbal-web,
I'm going to close this PR. For accessibility topics we really need an accessibility specialist to write the content with a larger understanding of the topic..
If you want to contribute, focus on what you do best and please let us know beforehand if you want to work on an issue.
cc @joedolson